<template>
  <el-dialog v-model="state.tableDialogData.show" title="执行日志" width="85%">
    <!-- 搜索 -->
    <AppSearchForm @submit="search()" @reset="reset()">
      <el-form-item>
        <el-date-picker
          v-model="state.query.date"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="state.query.isSuccess"
          placeholder="日志状态"
          clearable
          size="small"
          class="filter-item"
          style="width: 110px"
          @change="search"
        >
          <el-option
            v-for="item in state.enabledTypeOptions"
            :key="item.key"
            :label="item.display_name"
            :value="item.key"
          />
        </el-select>
      </el-form-item>
    </AppSearchForm>
    <!--表格渲染-->
    <AppPageTable
      stripe
      :data="state.tableData.data"
      @change="getList()"
      :option="state.tableData.option"
      class="table"
      :height="'500px'"
    >
      <el-table-column
        :show-overflow-tooltip="true"
        prop="taskGroup"
        label="任务组"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="taskName"
        label="任务名称"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="assemblyName"
        label="程序集"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="className"
        label="执行类"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="cron"
        label="cron表达式"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="runParams"
        width="120px"
        label="执行参数"
      />
      <el-table-column prop="createTime" label="异常详情" width="110px">
        <template #default="scope">
          <el-button
            v-show="scope.row.exceptionDetail"
            size="small"
            link
            @click="getErrorLog(scope.row.exceptionDetail)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        prop="executionDuration"
        width="100px"
        label="耗时(毫秒)"
      />
      <el-table-column
        align="center"
        prop="isSuccess"
        width="80px"
        label="状态"
      >
        <template #default="scope">
          <el-tag :type="scope.row.isSuccess ? 'success' : 'danger'">{{
            scope.row.isSuccess ? "成功" : "失败"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="createTime"
        label="执行时间"
      />
    </AppPageTable>

    <el-dialog
      v-model="state.logDetailDialogData.show"
      append-to-body
      title="异常详情"
      width="75%"
    >
      <div
        style="
          width: 100%;
          min-height: 200px;
          max-height: 500px;
          overflow: auto;
        "
      >
        <highlightjs language="java" :code="state.logDetailDialogData.errorlog" />
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { defineComponent } from 'vue';
import hljsVuePlugin from "@highlightjs/vue-plugin";
import "highlight.js/lib/common";
export default defineComponent({
  components: {
    highlightjs: hljsVuePlugin.component
  },
  setup() {
    
  },
})
</script>


<script setup>
import { ref, onMounted, reactive } from "vue";
import AppSearchForm from "@/components/AppSearchForm.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import AppTitleBox from "@/components/AppTitleBox.vue";

import request from "@/public/request";

const state = reactive({
  query: {
    id: "",
    isSuccess: "",
    date: [],
  },
  tableData: {
    data: [],
    option: useTableOption(),
  },
  tableDialogData: {
    show: false,
  },
  logDetailDialogData: {
    show: false,
    errorlog: "",
  },
  enabledTypeOptions: [
    { key: "true", display_name: "成功" },
    { key: "false", display_name: "失败" },
  ],
});
// 
const init = (id) => {
  state.query.id = id;
  state.tableDialogData.show = true;
  getList();
};
const getList = async () => {
  let url = "/api/tasks/logs/query/" + state.query.id;
  if (state.query.date && state.query.date.length > 0) {
    state.query.date[0] = dayjs(state.query.date[0]).format(
      "YYYY-MM-DD HH:mm:ss"
    );
    state.query.date[1] = dayjs(state.query.date[1])
      .add(1, "day")
      .subtract(1, "second")
      .format("YYYY-MM-DD HH:mm:ss");
    url =
      url +
      `?CreateTime=${state.query.date[0]}&CreateTime=${state.query.date[1]}`;
  }
  state.tableData.option.loading = true;
  let res = await request.get(url, {
    IsSuccess: state.query.isSuccess,
    PageIndex: state.tableData.option.page,
    PageSize: state.tableData.option.pageSize,
  });
  state.tableData.data = res.content;
  state.tableData.option.total = res.totalElements;
  state.tableData.option.loading = false;
};
// 搜索点击
const search = () => {
  state.tableData.option.page = 1;
  state.tableData.pageSize = 10;
  state.getList();
};
// 重置搜索条件
const reset = () => {
  state.query.isSuccess = "";
  state.query.date = "";
  state.tableData.option.page = 1;
  state.tableData.pageSize = 10;
  state.getList();
};
const getErrorLog = (data) => {
  state.logDetailDialogData.errorlog = data;
  state.logDetailDialogData.show = true;
};
</script>

<style lang="scss" scoped>
</style>
